<template>  
    <div class="remark">
        <vheader :is-left="true" title="订单备注"/>
        <!-- 订单备注 -->
        <div class="view-body">
            <section>
                <textarea placeholder="填写额外对商家或骑手小哥的信息" v-model="text" maxlength="100"></textarea>
                <div class="switch">
                    <span v-for="(item,index) in radioItem" :key="index" 
                    class="switch-item item-line" :class="{'selected':item.select}" @click="handleRadioItem(item)">{{item.name}}</span>
                </div>
                <div class="switch" v-for="(item,index) in switchItem" :key="index">
                    <span @click="item.select=!item.select" :class="{'selected':item.select}" class="switch-item">{{item.name}}</span>
                </div>
            </section>
            <button class="btn-submit" @click="submitClick">确定</button>
        </div>
    </div>
  </template>

<script>
    import vheader from "../../components/vheader.vue";
    export default {
        name: 'remark',
        data() {
            return {
                radioItem: [{
                    select: false,
                    name: "不要辣"
                }, {
                    select: false,
                    name: "少点辣"
                }, {
                    select: false,
                    name: "多点辣"
                }, ],
                switchItem: [{
                    select: false,
                    name: "不要香菜"
                }, {
                    select: false,
                    name: "不要洋葱"
                }, {
                    select: false,
                    name: "多点醋"
                }, {
                    select: false,
                    name: "多点葱"
                }, ],
                text: "", //用户输入的留言需要绑定
            }
        },
        methods: {
            handleRadioItem(item) {
                console.log(item);
                //单选 排他思想
                this.radioItem.forEach(ele => {
                    ele.select = false
                });
                item.select = true
            },
            submitClick() {
                let selectItems = "";
                this.radioItem.forEach(ele => {
                    if (ele.select) {
                        selectItems += ele.name + ","
                    }
                });
                this.switchItem.forEach(ele => {
                    if (ele.select) {
                        selectItems += ele.name + ","
                    }
                });
                selectItems += this.text;
                //存储到vuex中的remarkInfo
                this.$store.dispatch("remarkInfo", {
                    tableWare: this.$store.getters.remarkInfo.tableWare,
                    remark: selectItems
                });
                this.$router.go(-1);
            }
        },
        components: {
            vheader
        }
    }
</script>

<style scoped>
    .remark {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding-top: 45px;
    }
    
    .view-body {
        width: 100%;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
        font-size: 0.8rem;
        color: #333;
    }
    
    .view-body section {
        margin-top: 2.133333vw;
        padding: 4.266667vw;
        background-color: #fff;
        margin-bottom: 2.133333vw;
    }
    
    .view-body section textarea {
        width: 100%;
        height: 29.866667vw;
        margin-bottom: 4.266667vw;
        padding: 4.266667vw;
        border: 1px solid #ccc;
        border-radius: 0.666667vw;
        background-color: #f9f9f9;
        color: #666;
        resize: none;
        box-sizing: border-box;
        outline: none;
    }
    
    .switch {
        display: inline-block;
        margin: 0 2.666667vw 2.666667vw 0;
        border: 1px solid #ddd;
        overflow: hidden;
        border-radius: 1.066667vw;
    }
    
    .switch-item {
        display: inline-block;
        padding: 0 2.133333vw;
        height: 8vw;
        line-height: 8vw;
        text-align: center;
        color: #666;
    }
    
    .item-line::after {
        content: " ";
        display: inline-block;
        height: 4vw;
        width: 1px;
        background: #ddd;
        line-height: 8vw;
        vertical-align: middle;
        left: 2.266667vw;
        position: relative;
    }
    
    .btn-submit {
        display: block;
        padding: 3.466667vw 0;
        color: #fff;
        background-color: #00e067;
        border-radius: 0.533333vw;
        opacity: 0.98;
        width: 92vw;
        margin: 3.133333vw auto 0;
        font-size: 1rem;
    }
    /* 选中样式 */
    
    .switch-item.selected {
        background: #0186ff;
        color: #fff;
        position: relative;
    }
</style>
</style>